<template>
	<view>
		<u-navbar placeholder fixed autoBack title="单位详情"></u-navbar>
		<view class="d-p-30" v-if="info">
			<view class="d-font-32" style="font-weight: bold;color: #323334;">单位信息</view>
			<view class="card d-p-30 d-m-t-20">
				<view class="sub-title d-font-32" style="color: #151C24;font-weight: bold;">基础信息</view>
				<view class="d-flex item u-border-bottom">
					<view class="label d-flex-1">单位名称</view>
					<view class="d-font-28">{{ info.qymc || '无数据源' }}</view>
				</view>
				<view class="d-flex item u-border-bottom">
					<view class="label d-flex-1">证件类型</view>
					<view class="d-font-28">{{ info.zjlx || '无数据源' }}</view>
				</view>
				<view class="d-flex item u-border-bottom">
					<view class="label d-flex-1">统一社会信用代码</view>
					<view class="d-font-28">{{ info.tyshxydm || '无数据源' }}</view>
				</view>
				<view class="d-flex item u-border-bottom">
					<view class="label d-flex-1">单位地址</view>
					<view class="d-font-28">{{ info.qyjydz || '无数据源' }}</view>
				</view>
				<view class="d-flex item u-border-bottom">
					<view class="label d-flex-1">单位类型</view>
					<view class="d-font-28">{{ info.qylx || '无数据源' }}</view>
				</view>
				<view class="d-flex item u-border-bottom">
					<view class="label d-flex-1">所属区划</view>
					<view class="d-font-28">{{ info.districtName || '无数据源' }}</view>
				</view>
				<view class="d-flex item u-border-bottom">
					<view class="label d-flex-1">主项资质类别</view>
					<view class="d-font-28">{{ info.zzlb || '无数据源' }}</view>
				</view>
				<view class="d-flex item u-border-bottom">
					<view class="label d-flex-1">资质等级</view>
					<view class="d-font-28">{{ info.dj || '无数据源' }}</view>
				</view>
				<view class="d-flex item u-border-bottom">
					<view class="label d-flex-1">法人证件号码</view>
					<view class="d-font-28">{{ info.frdbzjhm || '无数据源' }}</view>
				</view>
				<view class="d-flex item u-border-bottom">
					<view class="label d-flex-1">单位联系电话</view>
					<view class="d-font-28" @click="callPhone(info.dwdh)">
						<text style="color: #21A5F3;font-weight: bold;">{{ info.dwdh || '无数据源' }}</text>
					</view>
				</view>
				<view class="d-flex item u-border-bottom">
					<view class="label d-flex-1">单位传真</view>
					<view class="d-font-28">{{ info.qyczhm || '无数据源' }}</view>
				</view>
				<view class="d-flex item u-border-bottom">
					<view class="label d-flex-1">手机号码</view>
					<view class="d-font-28" @click="callPhone(info.dwdh)">
						<text style="color: #21A5F3;font-weight: bold;">{{ info.dwdh || '无数据源' }}</text>
					</view>
				</view>
				<view class="d-flex item u-border-bottom">
					<view class="label d-flex-1">邮政编码</view>
					<view class="d-font-28">{{ info.jydzyb || '无数据源' }}</view>
				</view>
				<view class="d-flex item u-border-bottom">
					<view class="label d-flex-1">单位邮箱</view>
					<view class="d-font-28">{{ info.rclxryx || '无数据源' }}</view>
				</view>
			</view>
			
			<view class="card d-m-t-30 d-p-30">
				<view class="d-flex d-m-b-20"><view class="d-font-32 d-flex-1" style="color: #151C24;font-weight: bold;">附件</view></view>
				<view class="table">
					<view class="tr">
						<view class="th d-p-l-30">序号</view>
						<view class="th">附件</view>
						<view class="th">数量</view>
					</view>
					<template v-if="file && file.length > 0">
						<view class="tr" v-for="(item, index) in file" :key="index" @click="fileInfo(item)">
							<view class="td d-p-l-30">{{ index + 1 }}</view>
							<view class="td">
								<text style="color: #21A5F3;">{{ item.attachName }}</text>
							</view>
							<view class="td">{{ item.count }}</view>
						</view>
					</template>
				</view>
				<view class="d-flex d-row-center d-p-t-20" v-if="!file || file.length <= 0">
					<view><u-empty mode="list" icon="/static/image/none.png" text="暂无附件信息"></u-empty></view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
import { deptDetail, getAtta as getFileList } from '../../../common/api.js';
export default {
	data() {
		return {
			current: 0,
			info: null,
			file: []
		};
	},
	onLoad(e) {
		// todo 页面共用 注意 按照下述规则进行操作
		if (e.id) {
			this.id = e.id;
		} else {
			this.id = 'qyxx_21102016152600000003';
		}
		this.init();
	},
	methods: {
		init() {
			deptDetail({
				id: this.id
			}).then(e => {
				this.info = e.data;
				getFileList({
					params: {
						ywlx: 'salary_core_dept_mx',
						ywbh: this.id
					}
				}).then(e => {
					this.file = e.data;
				});
			});
		},
		fileInfo(item) {
			let list = item.attachList;
			if (!list) {
				return uni.$u.toast('暂无附件');
			}
			uni.previewImage({
				urls: list.map(e => {
					return e.attachUrl;
				}),
				indicator: 'number',
				loop: true,
				fail: e => {
					console.error(e);
					uni.$u.toast('系统繁忙, 请稍后再试!');
				}
			});
		},
		callPhone(e) {
			uni.makePhoneCall({
				phoneNumber: '' + e
			});
		},
		appDetail() {
			uni.$u.route({
				url: '/pages/index/app/appDetail'
			});
		}
	}
};
</script>

<style lang="scss">
.position {
	position: fixed;
	left: 0;
	right: 0;
	background-color: #ffffff;
	z-index: 9999;
}
page {
	background-color: #fbfcfc;
	.card {
		box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
		border-radius: 10rpx;
		background-color: #ffffff;
		.sub-title {
			position: relative;
			padding-left: 20rpx;
			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 8rpx;
				height: 22rpx;
				background: #13a4fe;
				border-radius: 4rpx;
				bottom: 0;
				margin: auto;
			}
		}
		.item {
			height: 100rpx;
			.label {
				font-size: 30rpx;
				font-weight: 400;
				color: #5d6672;
			}
		}
		.item-min {
			height: 60rpx;
			.label {
				font-size: 28rpx;
				color: #5d6672;
			}
			.val {
				font-weight: bold;
			}
		}
		.table {
			font-size: 28rpx;
			display: table;
			width: 100%;
			vertical-align: middle;
			border: 1px solid #f6f7f8;
			.tr {
				display: table-row;
				.th,
				.td {
					display: table-cell;
					height: 80rpx;
					vertical-align: middle;
				}
				.th {
					font-weight: bold;
					color: #162233;
				}
				&:nth-child(2n-1) {
					background-color: #f6f7f8;
				}
			}
		}
	}
}
</style>
